<template>
  <div class="header">
    <div class="name" v-if="userInfo && userInfo.userInfo">{{userInfo.userInfo.username}}</div>
    <div class="setting">
      <el-dropdown @command="handleCommand" trigger="click">
        <i class="iconfont icon-shezhi"></i>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">ENG</el-dropdown-item>
            <el-dropdown-item command="logout">
              <span class="logout">{{$t('退出登录')}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
  </div>

</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import * as api from "@/api";

  export default {
    name: "head",
    components: {},
    computed: {
      ...mapGetters({
        userInfo: 'system/userInfo', // 映射 allDictionaries 到 dicts
      }),
    },
    data() {
      return {

      }
    },
    methods: {
      ...mapActions({ setUserInfo: 'system/setUserInfo' }),
      handleCommand(e) {
       if (e != 'logout') {
         this.$i18n.locale = e; // 修改全局语言
         this.$store.dispatch('system/setLanguage', e);
       } else {
         this.goLogout()
       }
      },
      async goLogout(){
        try {
          const {data} = await api.logout();
        } catch (e) {
          console.log(e)
        } finally {
          let language = this.language
          this.setUserInfo({});
          localStorage.clear();
          localStorage.setItem('language', language)
          this.$router.push({
            name: 'Login'
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .header{
    width: 100%;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-bottom: 12px;
    .name{
      height: 17px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
    }
    .setting{
      font-size: 14px;
      color: #DFDFDF;
      .iconfont{
        font-size: 14px;
        color: #DFDFDF;
      }
    }
  }
</style>
